<template>
  <div>
    <el-container>
      <!--  侧边栏  -->
      <el-aside :width="asidewidth" style="min-height: 100vh; background-color:#001529">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
          <img src="@/assets/logo.png" alt="logo" style="width: 40px;height: 40px;">
        </div>
        <div class="logo-title" v-show="!isCollapse">honey2024vs</div>
        <el-menu :collapse="isCollapse" :collapse-transition="flase" router background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style="border:none" :default-active="$route.path">
          <el-menu-item index="/">
              <i class="el-icon-house"></i>
              <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>导航一</span>
            </template>
            <el-menu-item index="/Elements">Elements</el-menu-item>
            <el-menu-item>选项二</el-menu-item>
            <el-menu-item>选项三</el-menu-item>
          </el-submenu>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>导航二</span>
            </template>
            <el-menu-item>选项一</el-menu-item>
            <el-menu-item>选项二</el-menu-item>
            <el-menu-item>选项三</el-menu-item>
          </el-submenu>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航三</span>
            </template>
            <el-menu-item index="/">系统首页</el-menu-item>
            <el-menu-item>选项二</el-menu-item>
            <el-menu-item>选项三</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

    <el-container>
      <!--  头部  -->
      <el-header>
        <i :class="collapseicon" style="font-size: 26px;" @click="handlecollapse"></i>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="flex:1;width: 0;display: flex; align-items: center;justify-content: end;">
          <i class="el-icon-fullscreen" style="font-size:26px" @click="handlefull"></i>
          <el-dropdown placement="bottom">
            <div style="display: flex; align-items: center; cursor:default">
              <img src="@/assets/logo.png" style="width: 40px;height: 40px; margin: 0 5px;">
              <span>管理员</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click="">退出登录</el-dropdown-item>
              <el-dropdown-item disabled>修改设置</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!--  主体内容  -->
      <el-main>
        <div style="box-shadow: 2px 0 6px rgb(0 21 41 / 15%);display: flex;align-items: center;padding:15px 0 15px 10px;">
          我本将心向明月，奈何明月照沟渠！
        </div>
        <div style="box-shadow: 2px 0 6px rgb(0 21 41 / 15%); margin-top: 10px;padding: 15px 0 15px 10px">
          <div style="margin:5px 0;">这是vue和sprintboot的学习课程</div>
          <div style="margin:5px 0 10px 0;">试试点击下面的按钮吧</div>
          
        <el-row>
            <el-col :span="24">
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-col>
        </el-row>
        </div>
      </el-main>


    </el-container>



    </el-container>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data(){
    return{
      isCollapse: false,     //不收缩
      asidewidth:"200px",
      collapseicon:"el-icon-s-fold"
    }
  },
  methods:{
    handlefull(){
      document.documentElement.requestFullscreen()
    },
    handlecollapse(){
      this.isCollapse = !this.isCollapse
      this.asidewidth = this.isCollapse ? "64px" : "200px"
      this.collapseicon = this.isCollapse ? "el-icon-s-unfold" : "el-icon-s-fold"
    }
  }
}
</script>


<style>

.el-menu--inline .el-menu-item{
  background-color: #000c17 !important;
  padding-left: 49px !important;
}
.el-menu-item:hover, .el-submenu__title:hover{
  color:#fff !important;
}
.el-submenu__title:hover i {
  color:#fff !important;
}
.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px);
  margin-left:4px;
}
.el-menu-item.is-active i ,.el-menu-item.is-active .el-tooltip{
  margin-left: -4px;
}
.el-menu-item{
  height: 40px!important;
  line-height: 40px!important;
}
.el-submenu__title{
  height: 40px!important;
  line-height: 40px!important;
}
.el-submenu .el-menu-item{
  min-width: 0 !important;
}
.el-menu--inline .el-menu-item.is-active{
  padding-left: 45px !important;
}
.el-aside{
  transition: width .3s;
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
}
.logo-title{
  color:white; 
  font-size: 18px; 
  text-align: center;
  transition: all .3s;  /*.3是0.3的意思 */
}
.el-header{
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
  display: flex;
  align-items: center;
}
</style>